3. User Experience

3.1 Customer Flow

Figure 3. User Flow Save Card Details

3.2 Initial payment for customer

Figure 4. Initial payment page

3.3 Capturing a Saved Card Detail

When saving the bank card details, an optional field is displayed to give this saved card an "Alias".
If no alias is provided the masked card number will be used as an alias.

Figure 5. Save Card Details

3.4 Customer Saved Cards UI

Figure 6. Customer Saved Card List

When the unique merchant and customer Id is passed to the payment page in future API payment requests,
and the merchant is enabled for Save Card functionality and there are saved cards for that customer (or that customer belonging to the same Merchant Group),
the customer will be able to choose from one of his saved cards instead. The customer can always choose to enter new card details as before.
Selecting a previously saved card and entering its Security Code (CVV) will enable the "Pay" button to complete the payment. (Normal 3DSecure checks will still apply).


3.5 Deleting Saved Cards

Selecting the "EDIT" button above the saved cards, will allow you to remove an existing saved card by selecting the trash-can icon.

Figure 7. Deleting a Saved Card

When deleting a card, you will be given the option of confirming that request before the card is removed from this merchant and customer profile.
As the saved card Alias is not a mandatory field, the alias name may show as the masked card number instead.

Figure 8. Confirmation of Saved Card Deletion for a card with an Alias

Figure 9. Confirmation of Saved Card Delete for a Card with no Alias

Continue